<template>
    <div class="categoryPage">
        <div class="container">
            <nav-moudel></nav-moudel>
            <div class="wrapleftNav">
                <div class="banner">
                    <img :src="`${fileDomin}/${banner}`" />
                </div>
                <ul class="specialList">
                    <li v-for="(item,key) in categoryList" :key="key">
                        <nuxt-link :to="`/special/${item.sid}`">{{item.title}}</nuxt-link>
                    </li>
                </ul>
                <el-pagination
                    :hide-on-single-page="true"
                    :pager-count='5'
                    background
                    :current-page='Number(this.$route.query.pn) || 1'
                    layout="prev, slot, next"
                    @current-change="goCurrentPage"
                    :total="specialCount">
                    <div class="pagerInfo">
                        <button>{{Number(this.$route.query.pn) || 1}} / {{specialMaxPage}}</button>
                    </div>
                </el-pagination>
            </div>
            <div class="wrapright MobileHide">
                <div
                    class="siderBox"
                    :class="{acticeFlex: leaveHead}">
                    <sider-moudel></sider-moudel>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapMutations, mapGetters, mapActions} from 'vuex';
import scrollEvent from '~/mixins/scrollEvent';
import navMoudel from '~/components/layout/navMoudel.vue'
import siderMoudel from '~/components/layout/siderMoudel.vue';
export default {
    name: 'category',
    layout: 'current',
    scrollToTop: true,
    watchQuery: ['pn'],
    validate({ params, query }) {
        let id = params.id
        let re = /^[0-9]+.?[0-9]*$/;
        if (id && re.test(id)) {
            return true;
        }
        return false;
    },
    mixins: [scrollEvent],
    async asyncData({app, params, query, store }) {
        let paramsOpt = {
            id: params.id
        };
        app.head.title = 'new title'
        let pn = query.pn || null;
        pn ? paramsOpt.pn = pn : paramsOpt.pn = 1;
        await store.dispatch('sentence/getSpecialList', paramsOpt);
        const category = store.getters.category.find(item => item.id == params.id).name
        return {
            title: `${category}-句摘文学`
        }
    },
    head() {
        return {
            title: this.title,
            meta: [
                { hid: 'keywords', name: 'keywords', content: `${this.title}-句摘文学，句子迷，句子控，优美句子，励志句子` },
                { hid: 'description', name: 'description', content: '句摘文学，文艺青年的家' }
            ]
        }
    },
    data() {
        return {
            banner: 'category2.jpg'
        }
    },
    methods: {
        goCurrentPage(page) {
            let linkPath = {
                path: this.$route.path,
                query: {
                    pn: page
                }
            };
            this.$router.push(linkPath);
        }
    },
    components: {
        siderMoudel, navMoudel
    },
    computed: {
        ...mapGetters(['fileDomin']),
        ...mapGetters('sentence', ['categoryList', 'specialCount', 'specialMaxPage'])
    }
}
</script>
<style lang="stylus" scoped>
.categoryPage
    width 100%
    height auto
    .banner
        max-height 200px
        overflow hidden
        img
            width 100%
.specialList
    li
        line-height 20px
        padding 10px 20px
        margin-bottom 10px
        a
            font-size 14px
        
</style>
